<template>
    <div class="photo-list">
        <nav-bar title="图文列表"></nav-bar>
         <div class="photo-header">
             <ul>
                 <li v-for="cate in categorys" :key="cate.id">
                     <a @click="loadImgsByCategoryId(cate.id)" href="javascript:;">{{cate.title}}</a>
                 </li>
             </ul>
         </div>
         <div class="photo-list">
             <ul>
                 <li v-for="img in imgs" :key="img.id">
                     <router-link :to="{name: 'photo.detail', query: {id: img.id}}">
                         <img v-lazy="img.img_url">
                         <p>
                             <span>{{img.title}}</span>
                             <span>{{img.zhaiyao}}</span>
                         </p>
                    </router-link>
                 </li>
             </ul>
         </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      imgs: [],
      categorys: []
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 路由复用，路由参数改变触发
    // 参数：query || params
    this.loadImgById(to.params.categoryId)
    next()
  },
  created () {
    // 1.获取路由参数
    let categoryId = this.$route.params.categoryId
    this.loadImgById(categoryId)
    // 2.获取分类信息
    this.$axios
      .get('/getimgcategory')
      .then(res => {
        this.categorys = res.data.message
        this.categorys.unshift({
          id: 0,
          title: '全部'
        })
      })
      .catch(err => console.log('获取分类信息失败', err))
    // 3.获取数据渲染
  },
  methods: {
    loadImgById (id) {
      this.$axios.get('getimages/' + id)
        .then(res => {
          this.imgs = res.data.message
          if (this.imgs.length === 0) {
            this.$toast({
              message: '没有图片了',
              iconClass: 'iconfont icon-debug'
            })
          }
        })
        .catch(err => console.log('获取图片列表失败', err))
    },
    loadImgsByCategoryId (categoryId) {
      this.$router.push({
        name: 'photo.list',
        params: {
          categoryId
        }
      })
    }
  }
}
</script>
<style lang="less">
.photo-list {
     margin: 0 0 3.4375rem 0;
  .photo-header {
    ul {
      white-space: nowrap;
      overflow-x: auto;
      padding-left: 0;
      margin: 5px;
      line-height: 32px;
    }
    li {
      list-style: none;
      display: inline-block;
      margin-left: 0.8rem;
      height: 2rem;
      a {
        text-decoration: none;
        background-color: #b1848c;
        border-radius: 5px;
        color: #fff;
        padding: 3px 5px;
        cursor: pointer;
      }
      a:hover {
        background-color: brown;
      }
    }
  }

  .photo-list {
      li {
          position: relative;
          list-style: none;
          img {
              width: 100%;
              height: 15rem;
              object-fit: fill;
          }
      }
      p {
          position: absolute;
          bottom: 0;
          width: 100%;
          display: flex;
          flex-direction: column;
          color: #fff;
          background-color: rgba(0, 0, 0, .3);
          max-height: 5.625rem;
          overflow-y: auto;
          span {
            width: 100%;
          }
      }
  }
}
</style>
